<template>
  <div id="app">
    <header class="app-header">
      <h1>🌍 Vite 地区组件自动切换插件演示</h1>
      <p>
        当前构建地区: <strong>{{ currentRegion }}</strong>
      </p>
    </header>

    <main class="app-main">
      <!-- 使用地区组件 -->
      <section class="region-section">
        <h2>地区特定组件</h2>
        <RegionComponent />
      </section>

      <!-- 使用示例组件 -->
      <section class="example-section">
        <h2>使用示例</h2>
        <ComponentUsage />
      </section>

      <!-- 条件编译示例 -->
      <section class="example-section">
        <h2>条件编译示例</h2>
        <ConditionalCodeExample />
      </section>

      <!-- 说明信息 -->
      <section class="info-section">
        <h2>插件说明</h2>
        <div class="info-card">
          <h3>🔄 自动切换原理</h3>
          <p>
            插件在构建时自动将代码中的
            <code>@/components/cn/</code> 路径替换为当前地区的路径。
          </p>

          <h3>🌳 Tree Shaking</h3>
          <p>只有当前地区的组件会被打包，其他地区的组件会被自动排除。</p>

          <h3>📦 构建命令</h3>
          <div class="commands">
            <code>VITE_REGION=cn pnpm build</code> - 构建中国版<br />
            <code>VITE_REGION=jp pnpm build</code> - 构建日本版<br />
            <code>VITE_REGION=us pnpm build</code> - 构建美国版
          </div>

          <h3>🚀 Script Setup 语法</h3>
          <p>
            本项目使用 Vue 3.5.13 的
            <code>&lt;script setup&gt;</code> 语法，更简洁、更高效！
          </p>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { computed } from "vue";
// 始终使用 cn 路径，vite 插件会自动替换为当前地区（开发和构建模式都生效）
import RegionComponent from "@/components/cn/index.vue";
import ComponentUsage from "@/examples/ComponentUsage.vue";
import ConditionalCodeExample from "@/examples/ConditionalCodeExample.vue";
import { initApp } from "@/utils/regionConfig.js";
import "@/styles/region-theme.css";

// 获取当前地区
const currentRegion = computed(() => {
  return import.meta.env.VITE_REGION || "cn";
});

// 初始化应用（包含条件编译的配置）
initApp();
</script>

<style>
#app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
  font-weight: 700;
}

.app-header p {
  margin: 0;
  font-size: 1.2em;
  opacity: 0.9;
}

.app-main {
  display: grid;
  gap: 30px;
}

.region-section,
.example-section,
.info-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e1e5e9;
}

.region-section h2,
.example-section h2,
.info-section h2 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 600;
}

.info-card {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.info-card h3 {
  margin: 0 0 15px 0;
  color: #495057;
  font-size: 1.3em;
}

.info-card p {
  margin: 0 0 20px 0;
  color: #6c757d;
}

.info-card code {
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 0.9em;
  color: #e83e8c;
}

.commands {
  background: #343a40;
  color: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 0.9em;
  line-height: 1.8;
}

.commands code {
  background: transparent;
  color: #28a745;
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  #app {
    padding: 10px;
  }

  .app-header h1 {
    font-size: 2em;
  }

  .region-section,
  .example-section,
  .info-section {
    padding: 20px;
  }
}
</style>
